<template>
  <el-row>
    <el-col :span="24">
      <el-form :model="tiger" label-width="auto" style="max-width: 600px">
        <el-form-item label="老虎名字">
          <el-input v-model="tiger.tigerName"/>
        </el-form-item>
        <el-form-item label="老虎年龄">
          <el-input v-model="tiger.tigerAge"/>
        </el-form-item>
        <el-form-item label="老虎工资">
          <el-input v-model="tiger.tigerSalary"/>
        </el-form-item>
        <el-button type="primary" size="large" @click="submitClickHandler">数据保存</el-button>
      </el-form>
    </el-col>
  </el-row>
</template>

<script setup>
// --------------------------导入区--------------------------
import {reactive} from "vue";
import axiosInstance from '../config/axios.js';
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import pageStore from "../config/store.js";

// --------------------------数据区--------------------------
const tiger = reactive({});
let router = useRouter();
let globalPageInfo = pageStore();

// --------------------------功能区--------------------------
const submitClickHandler = async () => {
  // 1、提交表单
  // ※代码说明：这里加上 await 作用是是什么？
  // 本身 Axios 给后端发请求是异步操作，加上 await 就把异步操作改成了同步
  // 改成同步操作，就可以按顺序执行：给后端发送请求、后端处理请求、后端返回响应、Axios 解析响应、Axios 解析响应成功
  // 上面说的这些都完成再执行下一行代码
  // ※为什么要这么做呢？
  // 理由 1：代码可读性更好，逻辑上就是第一行代码执行完，再执行第二行
  //    异步操作：逻辑上是两条线
  //    同步操作：逻辑上是一条线
  // 理由 2：确保后续操作是在后端返回响应成功之后执行
  await axiosInstance.post("/tiger", tiger);

  // 2、弹出提示：保存成功
  ElMessage.success("Oh yeah!保存成功！");

  // ※把分页信息重置为默认值
  globalPageInfo.$reset();

  // 3、保存执行成功后，跳转到列表页面
  await router.push("/page");
}
</script>

<style scoped>

</style>